<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>一个重要的内置关系</title>
    <script src="../js/vue.js"></script>
  </head>

  <body>
    <!--
        1. 一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype
        2. 为什么要有这个关系：让组件实例对象（vc）可以访问到 Vue原型上的属性、方法。
     -->

    <div id="root">
      <school></school>
    </div>
  </body>
  <script>
    Vue.config.productionTip = false;
    Vue.prototype.x = 99;

    const school = Vue.extend({
      template: `
            <div>
                <h2>学校名称：{{name}}</h2>
                <h2>学校地址：{{address}}</h2>
                <button @click="showX">点我输出x</button>
            </div>
        `,
      data() {
        return {
          name: "南京财经大学",
          address: "文苑路3号",
        };
      },
      methods: {
        showX() {
          console.log(this.x);
        },
      },
    });

    const vm = new Vue({
      el: "#root",
      data: {
        msg: "你好",
      },
      components: {
        school,
      },
    });

    // 定义一个构造函数
    /* function Demo() {
        this.a = 1
        this.b = 2
    } */

    // 程序员通过显式原型属性操作原型对象，追加一个x属性，值为99
    // Demo.prototype.x = 99;

    // 创建一个Demo的实例对象
    // const d = new Demo();

    // prototype显式原型属性，__proto__隐式原型属性 => 都指向原型对象
    // console.log(Demo.prototype)
    // console.log(Demo.prototype === d.__proto__);

    // console.log(d);

    console.log(vm.$children[0].__proto__);
    console.log(school.prototype);
    console.log(vm.$children[0].__proto__ === school.prototype); // true

    // console.log(Vue.prototype);
    console.log(school.prototype.__proto__ === Vue.prototype); // true

    console.log(vm.$children[0].__proto__.__proto__ === Vue.prototype); // true
  </script>
</html>
